<template>
  <div v-if="visible" class="preview-wrap">
    <div class="close-btn" @click="cancel"><Icon type="md-close" size="18"/></div>
    <iframe name="previewFrame" style="width: 100%; height: 100%;" frameborder="0" :src="src"></iframe>
  </div>
</template>

<script>
  export default {
    name: 'PreviewFrame',
    props: {
      show: {
        type: Boolean,
        default: false
      },
      src: {
        type: String
      }
    },
    data() {
      return {
        visible: this.show
      }
    },
    mounted() {

    },
    methods: {
      cancel () {
        this.visible = false;
        this.$emit('cancel', this.visible)
      },
    },
    computed: {},
    watch: {
      show (val) {
        this.visible = val
      }
    }
  }
</script>

<style lang="less" scoped>
  .preview-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    .close-btn {
      width: 30px;
      height: 30px;
      background-color: #757575;
      border-left: 1px solid #424242;
      border-bottom: 1px solid #424242;
      position: absolute;
      right: 0;
      top: 0;
      text-align: center;
      line-height: 28px;
      cursor: pointer;
      color: #fff;
      &:hover {
        background-color: #616161;
      }
    }
  }
</style>
